<template>
  <el-dialog
    :width="$store.state.isMobile ? '90%' : '60%'"
    v-model="$store.state.isModer"
    :show-close="false"
  >
    <div class="my-header">
      <el-button
        circle
        plain
        size="small"
        @click="closeModer"
      >
        <i
          class="iconfont icon-close_24 text-xl font-bold leading-relaxed text-red-500"
        ></i>
      </el-button>
    </div>
    <el-input v-model="keywords" placeholder="请输入想要查找的关键字">
      <template #prepend><i class="iconfont icon-search_24" /></template>
    </el-input>
    <el-scrollbar height="400px">
      <!-- 搜索结果 -->
      <div class="search-result-wrapper">
        <el-divider />
        <ul>
          <li
            class="search-reslut"
            v-for="item of articleList.value"
            :key="item.id"
          >
            <!-- 文章标题 -->
            <a class="cursor-pointer font-sans text-xl font-medium text-blue-400 underline" @click="goTo(item.id)" v-html="item.title" />
            <!-- 文章描述 -->
            <span class="ml-4 text-xs" v-html="item.description"></span>
            <!-- 文章内容 -->
            <p
              class="search-reslut-content text-justify text-sm"
              v-html="item.content"
            />
          </li>
        </ul>
        <!-- 搜索结果不存在提示 -->
        <div
          v-show="flag && articleList.value == ''"
          class="text-base font-mono font-normal"
        >
          找不到您查询的内容：{{ keywords }}
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, ref, watch } from "vue";
import { getSearchArticles } from "@/api/frontend/index";
// 通过useStore得到store对象
const store = useStore();
// 调整弹窗宽度
onMounted(() => {
  window.onresize = () => {
    return (() => {
      const screenWidth = document.body.clientWidth;
      if (screenWidth < 768) {
        //当屏幕小于768时，设置Vuex里的数据为true
        store.commit("SET_MOBLIE", true);
      } else {
        //反之，设置Vuex里的数据为false
        store.commit("SET_MOBLIE", false);
      }
    })();
  };
});
function closeModer() {
  keywords.value = "";
  articleList.value = [];
  store.state.isModer = false;
}
const keywords = ref("");
const articleList = reactive([]);
const flag = ref(false);
const router = useRouter();
function goTo(articleId) {
  store.state.isModer = false;
  console.log("跳转详情页" + articleId);
  router.push({ path: "/article/detail", query: { articleId: articleId } });
}
watch(keywords, (newValue) => {
  flag.value = newValue.trim() !== "";
  if (flag.value) {
    getSearchArticles({ keywords: newValue }).then((res) => {
      if (res.success == true) {
        articleList.value = res.data;
      }
    });
  }
});
</script>

<style scoped>
.my-header {
  float: right;
  margin-bottom: 10px;
  margin-top: -40px;
}

.search-result-wrapper {
  padding-right: 5px;
  min-height: 350px;
  overflow: auto;
}
.search-reslut a {
  text-decoration: none;
  border-bottom: 1px solid #999;
}
.search-reslut-content {
  color: #555555;
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
  padding: 5px 0;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 解决出现弹窗滚动条宽度的问题 */
:deep(.el-popup-parent--hidden) {
    padding-right: 0px !important;
    overflow: hidden !important;
}
</style>
